<template>
  <view class="mine-change" v-cloak>
    <view class="change-card" v-if="type === 'nickName'">
      <h2>{{typeMap[type]}}</h2>
      <view class="card-input">
        <input placeholder="请输入昵称"  type="nickname" v-model="query.nickName" />
      </view>
      <p class="card-info">4-20个字符，可由中英文、数字、”-”、”_”组成</p>
      <button class="card-button" @click="handleSubmit">保存</button>
    </view>
    <view class="change-card" v-if="type === 'password'">
      <h2>{{typeMap[type]}}</h2>
      <view class="card-input">
        <input placeholder="请输入旧密码" type="password" v-model="query.oldPassword" />
      </view>
      <view class="card-input">
        <input placeholder="请输入新密码" type="password" v-model="query.newPassword" />
      </view>
      <view class="card-input">
        <input placeholder="请重复输入新密码" type="password" v-model="query.confirmPassword" />
      </view>
      <p class="card-info">8-16位英文字母、数字、字符组成（不能是纯数字）</p>
      <button class="card-button" @click="handleSubmitPasw">保存</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        type:'',
        typeMap:{
          nickName:'修改昵称',
          password:'修改帐号密码'
        },
        query:{}
      };
    },
    onLoad(options) {
      this.query = {
        ...uni.getStorageSync('user')
      }
      const {type} = options
      this.type = type
      uni.setNavigationBarTitle({
        title:this.typeMap[type]
      })
    },
    methods:{
      async handleSubmit(){  /// 点击提交数据
        let data = {}
        if(this.type === 'nickName'){
          data = {
            nickName:this.query.nickName
          }
        }
        const res = await this.$put('/mb/users',data,1)
        if(res.code == '1'){
          if(this.type === 'nickName'){
            uni.setStorageSync('user',{
              ...uni.getStorageSync('user'),
              ...data
            })
            this.info = {...this.info,...data}
          }
          uni.showToast({
            title:'修改成功',
            icon:'success'
          })
          setTimeout(()=>{
            uni.navigateBack()
          },1000)
        }else{
          uni.showToast({
            title:res.message,
            icon:'none'
          })
        }
      },
      async handleSubmitPasw(){  /// 点击提交账号密码
        if(this.query.oldPassword === this.query.newPassword){
          uni.showToast({
            title:'旧密码不能与新密码一致',
            icon:'none'
          })
          return;
        }
        if(this.query.newPassword !== this.query.confirmPassword){
          uni.showToast({
            title:'新密码和确认密码不一致',
            icon:'none'
          })
          return;
        }
        let data = {
          oldPassword:this.query.oldPassword,
          newPassword:this.query.newPassword
        }
        const res = await this.$put('mb/users/password',data,1)
        if(res.code == '1'){
          uni.showToast({
            title:'修改成功',
            icon:'success'
          })
          setTimeout(()=>{
            uni.navigateBack()
          },1000)
        }else{
          uni.showToast({
            title:res.message,
            icon:'none'
          })
        }
      },
      
    }
  }
</script>

<style lang="less" scoped>
.mine-change{
  min-height: 100vh;
  padding: 48rpx;
  box-sizing: border-box;
  h2{
    font-size: 36rpx;
    font-weight: 500;
    color: #90989F;
  }
  .card-input{
    background: #fff;
    padding: 24rpx;
    display: flex;
    align-items: center;
    margin-top: 48rpx;
    border-radius: 24rpx;
    input{
      font-size: 28rpx;
      flex: 1;
    }
  }
  .card-info{
    color: #90989F;
    font-size: 24rpx;
    margin-top: 24rpx;
  }
  .card-button{
    position: absolute;
    bottom: 100rpx;
    left: 48rpx;
    right: 48rpx;
    line-height: 88rpx;
    background: #FF6933;
    color: #fff;
    font-size: 32rpx;
    border-radius: 24rpx;
  }
}
</style>
